<!-- 好友列表 -->
<template>
	<div class="friendlist">
		<ul>
			<li v-for="item in searchedFriendlist" class="frienditem" :class="{ noborder: !item.initial }">
				<div v-if="item.initial" class="list_title">{{ item.initial }}</div>
				<div class="friend-info" :class="{ active: item.id === selectFriendId }" @click="selectFriend(item.id)">
					<img class="avatar" width="36" height="36" :src="item.img" />
					<div class="remark">{{ item.remark }}</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
	computed: {
		...mapState(['selectFriendId', 'searchText']),
		...mapGetters(['searchedFriendlist']),
	},
	methods: {
		...mapActions(['selectFriend']),
	},
};
</script>

<style lang="scss" scoped>
.friendlist {
	height: 540px;
	overflow-y: auto;
}
.friendlist .frienditem {
	border-top: 1px solid #dadada;
}
.friendlist .frienditem:first-child,
.friendlist .frienditem.noborder {
	border-top: none;
}
.friendlist .frienditem .list_title {
	box-sizing: border-box;
	width: 100%;
	font-size: 12px;
	padding: 15px 0 3px 12px;
	color: #999;
}
.friendlist .frienditem .friend-info {
	display: flex;
	padding: 12px;
	transition: background-color 0.1s;
	font-size: 0;
}
.friendlist .frienditem .friend-info:hover {
	background-color: #dcdcdc;
}
.friendlist .frienditem .friend-info.active {
	background-color: #c4c4c4;
}
.friendlist .frienditem .friend-info .avatar {
	border-radius: 2px;
	margin-right: 12px;
}
.friendlist .frienditem .friend-info .remark {
	font-size: 14px;
	line-height: 36px;
}
</style>
